<script src="../../../绿回头/green-back-app/miniprogram/utils/Verify.js"></script>
<template>
    <div>
        <div class=page-title-section style=background-image:url(images/parallax-5.jpg)>
            <div class=container>
                <div class="center-holder page-title">
                    <h1>联系我们</h1>
                    <p style="color: white;">
                        如果您对鸿创的商品有任何疑问，或者对我们的服务有任何意见或建议，非常欢迎您直接与我们联络，我们将竭诚为您服务。
                    </p>
                    <p style="color: white;">
                        如果您发现网站有错别字或者其他错误，请通过下述网站维护邮箱或电话及时告知我们。感谢您对我部网站的支持和关注！
                    </p>
                </div>
            </div>
        </div>
        <div class=partner-section-grey>
            <div class=container>
                <div class=contact-box>
                    <div class=row>
                        <div class="col-xs-12 col-md-4 col-sm-4 contact-icon">
                            <div class=icon-box><i class=icon-phone-reciever></i></div>
                            <h4>联系方式</h4>
                            <p v-if="data.phone" >Phone: {{data.phone}}</p>
                            <p v-if="data.fax" >传真: {{data.fax}}</p>
                        </div>
                        <div class="col-xs-12 col-md-4 col-sm-4 contact-icon">
                            <div class=icon-box><i class=icon-map-location></i></div>
                            <h4>地址</h4>
                            <p style=" margin: 0 20%;">{{data.address}}</p>
                        </div>
                        <div class="col-xs-12 col-md-4 col-sm-4 contact-icon">
                            <div class=icon-box><i class=icon-chat-bubbles></i></div>
                            <h4>邮箱</h4>
                            <p>{{data.email}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class=section-block>
            <div class=container>
                <div class="center-holder section-heading"><h2>意见/建议</h2></div>
                <div class="row mt-70">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">
                        <div class="primary-form">
                            <div class=col-xs-12><input placeholder="您的姓名" v-model="form.name"/></div>
                            <div class=col-xs-6><input placeholder="您的邮箱" type='email' v-model="form.email"/></div>
                            <div class=col-xs-6><input placeholder="您的电话" v-model="form.phone"/></div>
                            <div class=col-xs-12><textarea placeholder="请输入内容" v-model="form.message"/></div>
                            <div class=center-holder>
                                <button class="button button-primary mt-30" @click="submitMessage">发送消息</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {addFeedBack, getBaseData} from "../api/base";

    export default {
        name: "contact",
        data() {
            return {
                data : {
                    phone : '--',
                    fax : '--',
                    address : '--',
                    email : '--',
                },
                form: {
                    name: '',
                    email: '',
                    phone: '',
                    message: ''
                }
            }
        },
        mounted() {
            this.getDataSource();
        },
        methods: {
            // 获取基本信息
            getDataSource: async function () {
                const data = await getBaseData();
                if (data) {
                    let obj = this.data;
                    data.forEach((item) => {
                        let key = item['keywords'];
                        let value = item['content'];
                        if (key === 'company-fax') obj['fax'] = value;
                        if (key === 'company-email') obj['email'] = value;
                        if (key === 'company-mobile') obj['phone'] = value;
                        if (key === 'company-address') obj['address'] = value;
                    });
                    this.data = obj;
                }
            },
            submitMessage: async function () {
                let res = await addFeedBack(this.form);
                if (res) {
                    this.form = {
                        name: '',
                        email: '',
                        phone: '',
                        message: ''
                    };
                    alert('数据提交成功，感谢您的意见/建议反馈。')
                }
            }
        }
    }
</script>

<style scoped>

</style>